.qr-scanner-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  gap: 16px;
  padding: max(16px, var(--sai-top)) max(16px, var(--sai-right))
    max(16px, var(--sai-bottom)) max(16px, var(--sai-left));

  .qr-scanner-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .qr-scanner-video-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 1;
    background-color: var(--media-bg-color);

    /* default to 1:1 */
    --long-dimension: 1;
    --short-dimension: 1;

    /* portrait */
    max-width: calc(var(--short-dimension) * 1px);
    aspect-ratio: calc(var(--short-dimension) / var(--long-dimension));

    /* landscape */
    &.landscape {
      max-width: calc(var(--long-dimension) * 1px);
      aspect-ratio: calc(var(--long-dimension) / var(--short-dimension));
    }
  }

  .qr-scanner-video-container video {
    display: block;
    width: 100%;
    height: 100%;
  }

  .qr-scanner-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    image-rendering: pixelated;
  }

  .qr-scanner-corner-hint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;

    path {
      stroke: rgba(255, 255, 255, 0.5);
      shape-rendering: optimizeSpeed;
    }
  }

  .qr-scanner-result {
    flex-shrink: 0;
    text-align: center;
    min-height: 5em;

    .qr-scanner-text {
      margin-top: 0;
      padding-top: 0;
      word-break: break-all;
    }
  }
}
